<!doctype html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>Sample document</title>
  <link rel="stylesheet" href="style1.css">
  <style type="text/css">
        div.menu-bar ul ul {
        display: none;
        }

        div.menu-bar li:hover > ul {
        display: block;
        }
  </style>
  </head>
  <body>
   <div class="menu-bar">
    <ul>
        <li>
        <a href="example.html">Menu</a>
        <ul>
            <li>
            <a href="example.html">Link</a>
            </li>
            <li>
            <a class="menu-nav" href="example.html">Submenu</a>
            <ul>
                <li>
                <a class="menu-nav" href="example.html">Submenu</a>
                <ul>
                    <li><a href="example.html">Link</a></li>
                    <li><a href="example.html">Link</a></li>
                    <li><a href="example.html">Link</a></li>
                    <li><a href="example.html">Link</a></li>
                </ul>
                </li>
                <li><a href="example.html">Link</a></li>
            </ul>
            </li>
        </ul>
        </li>
    </ul>
</div>

  </body>
</html>
